<template>
    <div class="menu">
        <div class="container">
            <ul class="menu-list">
                <li
                        class="item"
                        v-for="(item, index) in menuList"
                        :key="index+'menu'"
                        @click="menuSelect(item.path, index)"
                        :class="activePathName===item.path?'item-active':''"
                >{{item.title}}</li>
            </ul>
            <div class="menu-other">
                <slot name="otherMenu">
                    <div class="tab">
                        <img src="../../assets/images/111111.png" alt="">
                        我的简历
                    </div>
                    <div class="line"></div>
                    <div class="tab">
                        <img src="../../assets/images/矢量智能对象2.png" alt="">
                        发布职位
                    </div>
                </slot>
            </div>
        </div>
    </div>
</template>

<script>
    import {mainRouter} from '@/router/router.js'
    export default {
        name: "MainMenu",
        props: {
            menuList: {
                type: Array,
                default: function () {
                    return mainRouter.children
                }
            }
        },
        watch:{
            $route(to,from){
                this.activePathName = this.$route.path;
            }
        },
        data() {
            return {
                activePathName: '',
                menuChoose: 0,
                // menuList: mainRouter.children
            }
        },
        methods: {
            menuSelect(path, index) {
                this.menuChoose = index;
                this.$router.push({path: path})
            }
        },
        mounted() {
            this.activePathName = this.$route.path;
        }
    }
</script>

<style scoped lang="less">
    .menu {
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        .container {
            height: 62px;
        }
        .menu-list {
            float: left;
            height: 100%;
            .item {
                float: left;
                padding: 20px;
                font-size: 18px;
                height: 100%;
                box-sizing: border-box;
                color: #333333;
                cursor: pointer;
                position: relative;
                &:hover {
                    color: #CF1311
                }
                &:hover:after {
                    content: '';
                    display:inline-block;
                    width:100%;
                    height:3px;
                    border-radius: 3px;
                    background: #CF1311;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
            .item-active {
                color: #CF1311;
                position: relative;
                &:after {
                    content: '';
                    display:inline-block;
                    width:100%;
                    height:3px;
                    border-radius: 3px;
                    background: #CF1311;
                    position: absolute;
                    bottom: 0;
                    left: 0;
            }
            }
        }
        .menu-other {
            float: right;
            display: flex;
            margin: 20px 0;
            .tab {
                font-size: 16px;
                color: #333333;
                padding-left: 20px;
                position: relative;
                img {
                    position: absolute;
                    left: 0;
                    top: 2px;
                }
            }
            .line {
                width: 1px;
                height: 16px;
                margin: 4px 13px;
                border-right: 1px solid #333333;
            }
        }
    }
</style>